﻿@inject DataSource Data

<FluentStack>
    <FluentCard Width="300px" Height="300px">
        <p>This card's content is restricted to its area. Open the select list below to see the result</p>
        <label for="people-listbox">Select a person</label>
        <FluentSelect TOption="Person"
                      Items="@Data.People.WithVeryLongName()"
                      Id="people-listbox"
                      Width="200px"
                      OptionValue="@(p => p.PersonId.ToString())"
                      OptionText="@(p => p.LastName + ", " + p.FirstName)"
                      @bind-Value="@SelectedValueART"
                      @bind-SelectedOption="@SelectedPersonART" />

    </FluentCard>
    <FluentCard Width="300px" Height="300px" AreaRestricted="false">
        <p>This card's content is not restricted to its area. Open the select list below to see the result</p>
        <label for="people-listbox">Select a person</label>
        <FluentSelect TOption="Person"
                      Items="@Data.People.WithVeryLongName()"
                      Id="people-listbox"
                      Width="200px"
                      OptionValue="@(p => p.PersonId.ToString())"
                      OptionText="@(p => p.LastName + ", " + p.FirstName)"
                      @bind-Value="@SelectedValueARF"
                      @bind-SelectedOption="@SelectedPersonARF" />

    </FluentCard>
</FluentStack>
@code
{
    Person? SelectedPersonART, SelectedPersonARF;
    string? SelectedValueART, SelectedValueARF;
}
